<template>
  <div ref="pages">
    <div class="tabview newsPageDiv">
      <img src="@/assets/banner_waterdrop.png" />
      <div class="nav-title-person-div">
        <div class="nav-title-text-div">
          <span class="nav-title-text-div-span">从业人员</span>
        </div>
      </div>
      <div class="person-nav-div">
        <a-layout>
          <a-layout-sider
            style="flex: 0 0 240px;max-width: 240px;min-width: 240px;width:240px;margin-top: 40px;"
          >
            <a-menu theme="dark" :default-open-keys="['sub1']" :default-selected-keys="['0']" mode="inline" @click="onLeftMenuClick">
                 <template  v-for="item in menuData">
                    <a-menu-item :key="item.key">
                       <!-- <router-link :to="{path: item.view === '' ? '/' : '/center/workingPersonPage/page' }"> -->
                        <span>{{item.name}}</span>
                      <!-- </router-link> -->
                  </a-menu-item>
                 </template>
            </a-menu>
            <a-empty :image="simpleImage" v-if="menuData.length==0" />
          </a-layout-sider>
          <a-layout>
            <a-layout-content style="margin: 0 16px">

              <a-breadcrumb class="breadcrumb" separator=" > ">
                <a-breadcrumb-item v-for="(item) in breadList" :key="item.title">
                  <template v-if="item=='首页'">
                    <router-link  to="/center/homePage">
                      {{ item }}
                    </router-link>
                  </template>
                  <template v-else>
                    <router-link  to="">{{ item }}</router-link>
                  </template>
                </a-breadcrumb-item>

              </a-breadcrumb>
              <div >
                  <span class="news-text">{{titleName}}</span>
                  <a-divider style="margin-top:20px;margin-bottom:20px;" />
                  <div class="search-div-select">
                     <a-input-group compact>
                      <a-select default-value="人员姓名" style="width:110px;"  v-model="querySelect">
                        <a-select-option value="1">
                          人员姓名
                        </a-select-option>
                        <a-select-option value="2">
                          单位名称
                        </a-select-option>
                        <a-select-option value="3">
                          身份证
                        </a-select-option>
                      </a-select>
                      <a-input v-model="queryinput"  allow-clear style="font-size:12px;width:180px;"/>
                    </a-input-group>
                      <!-- <a-input v-model="queryinput" placeholder="请输入人员姓名/单位名称/身份证号" allow-clear style="font-size:12px;"/> -->
                      <a-button type="primary" class="report-search-btn" @click="onQuery">查询</a-button>
                  </div>
                  <div class="unit-table-div">
                      <CustomTable
                        ref="table"
                        :showAlert="false"
                        :showSelection="false"
                        :columns="columns"
                        :loading="load"
                        @change="onTableChange"
                        :dataSource="pageData"
                        rowKey="id"
                      >
                        <template slot="xh" slot-scope="text, record, index">
                          {{((pageFilter.pageNo - 1) * pageFilter.pageSize +(index + 1))>9?(pageFilter.pageNo - 1) * pageFilter.pageSize +(index + 1) :'0' + (index + 1) }}
                        </template>
                        <template slot="action" slot-scope="record" >
                          <a style="z-index:999" @click="onViewDetails($event,record)">查看</a>
                        </template>
                      </CustomTable>
                  </div>
                </div>
            </a-layout-content>
          </a-layout>
        </a-layout>
      </div>
    </div>
    <!-- <footerPage :page="3"></footerPage> -->
  </div>
</template>

<script>
// import footerPage from '../footer/footerPage'
// import Breadcrumb from "@/components/base/tools/Breadcrumb";
import api from '@/api/index'
import emv from "@/views/center/emptyVue.vue";
import { Empty } from 'ant-design-vue';
export default {
  name: "workingPersonPage",
  inject: ["changeTab"],
  components: {
    //  footerPage,
    // Breadcrumb
  },
  beforeCreate() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
  },
  data() {
    return {
      keys:['3'],
      clientHeight:'',
      screenHeight:'',
      collapsed: true,
      breadList: [],
      defaultKey:'1',
      titleName:'',
      queryinput:'',
      load: false,
      querySelect:'1',
      // menuData:[],
      menuData:[//2020110改为写死
          {
            key:'0',
            name:'全部'
          },
          {
            key: '1',
            name: '建造师',
          },
          {
            key: '2',
            name: '监理工程师',
          },
          {
            key: '3',
            name: '造价工程师',
          },
          {
            key: '4',
            name: '注册土木工程师',
          },
          {
            key: '5',
            name: '总监理工程师',
          },
          {
            key: '6',
            name: '安全工程师',
          },
          {
            key: '7',
            name: '质量检测员',
          },
          {
            key: '8',
            name: '施工企业三类人员',
          },
          {
            key: '9',
            name: '施工管理五大员',
          },
          {
            key: '10',
            name: '其他',
          }

       ],


      // menuData: [
      //     {
      //         key: 'sub1',
      //         name: '设计',
      //         children:[
      //           {
      //              key: '1',
      //              name: '注册结构师',
      //           },
      //           {
      //              key: '2',
      //              name: '注册电力工程师',
      //           }
      //         ],
      //       },
      //       {
      //         key: 'sub2',
      //         name: '施工',
      //         children:[
      //           {
      //              key: '3',
      //              name: '建造师',
      //           },
      //           {
      //              key: '4',
      //              name: '造价工程师',
      //           },
      //           {
      //              key: '5',
      //              name: '施工专职安全生产管理人员',
      //           }
      //         ],
      //       },
      //       {
      //         key: 'sub3',
      //         name: '信息化',
      //         children:[
      //           {
      //              key: '6',
      //              name: '建造师',
      //           },
      //           {
      //              key: '7',
      //              name: '造价工程师',
      //           },
      //           {
      //              key: '8',
      //              name: '施工专职安全生产管理人员',
      //           }
      //         ],
      //       },
      //       {
      //         key: 'sub4',
      //         name: '监理',
      //         children:[
      //           {
      //              key: '12',
      //              name: '建造师',
      //           },
      //           {
      //              key: '10',
      //              name: '造价工程师',
      //           },
      //           {
      //              key: '11',
      //              name: '施工专职安全生产管理人员',
      //           }
      //         ],
      //       },



      //   ],

        columns: [
          {
              title: '序号',
              dataIndex: 'xh',
              key: 'xh',
              width:80,
              scopedSlots: { customRender: "xh" }
            },
            {
              title: '姓名',
              dataIndex: 'name',
              key: 'name',
              ellipsis: true,
            },
            {
              title: '性别',
              dataIndex: 'gender',
              key: 'gender',
              ellipsis: true,
            },
            {
              title: '职称',
              dataIndex: 'zhicheng',
              key: 'zhicheng',
              ellipsis: true,
            },
            {
              title: '资格名称',
              dataIndex: 'nameZg',
              key: 'nameZg',
              ellipsis: true,
            },
            {
              title: '从业单位',
              dataIndex: 'cydw',
              key: 'cydw',
              ellipsis: true,
            },
            {
              title: '详细信息',
              scopedSlots: { customRender: "action" }
            },
        ],
        pageData: [
            // {
            //   id: '1',
            //   xh: '1',
            //   name: '任维国',
            //   sex: '男',
            //   title: '项目经理',
            //   workingunit: '海南灌排技术开发有限公司'
            // },
            // {
            //   id: '2',
            //   xh: '2',
            //   name: '任维国',
            //   sex: '男',
            //   title: '项目经理',
            //   workingunit: '海南灌排技术开发有限公司'
            // },
            // {
            //   id: '3',
            //   xh: '3',
            //   name: '任维国',
            //   sex: '男',
            //   title: '项目经理',
            //   workingunit: '海南灌排技术开发有限公司'
            // },
            // {
            //   id: '4',
            //   xh: '4',
            //   name: '任维国',
            //   sex: '男',
            //   title: '项目经理',
            //   workingunit: '海南灌排技术开发有限公司'
            // },
            // {
            //   id: '5',
            //   xh: '5',
            //   name: '任维国',
            //   sex: '男',
            //   title: '项目经理',
            //   workingunit: '海南灌排技术开发有限公司'
            // }
         ],
        pageFilter: {
          pageNo: 1,
          pageSize: 10,
          isPass:true,
        },

    };
  },
  created() {
    // let menuDataTmp = this.$store.state.ryMenuData.menuData;
    // if(menuDataTmp && menuDataTmp.length>0){
    //   this.menuData = menuDataTmp;


    // }else{
    //   this.get_ryxx_categary_list();
    // }

    this.changeTab(6, "workingPersonPage", '<span class="tab_name">从业资格人员</span>');
    this.queryinput = this.$route.query.queryinput;
    if(this.queryinput){
      this.pageFilter.name = this.queryinput;
      this.pageFilter.cydw = '';
      this.pageFilter.idcard = '';
    }

     this.refreshTable();
  },
   mounted(){
      this.setFootStyle()

    },
   watch: {
    $route(data) {
      if(!data){
        this.getBreadcrumb();
        this.pageFilter.typeCyry = '建造师'
        this.defaultKey=this.menuData[0].key;
      } else {
        this.onQuery()
      }
    }
  },
  methods:{
   onLeftMenuClick({ key }) {
     this.defaultKey=key;
     this.getBreadcrumb();
     if(key=='0'){
       this.pageFilter.typeCyry = "";
     }else if(key=="1"){
       this.pageFilter.typeCyry = "建造师";
     }else if(key=="2"){
       this.pageFilter.typeCyry = "监理工程师";
     }else if(key=="3"){
       this.pageFilter.typeCyry = "造价工程师";
     }else if(key=="4"){
       this.pageFilter.typeCyry = "注册土木工程师";
     }else if(key=="5"){
       this.pageFilter.typeCyry = "总监理工程师";
     }else if(key=="6"){
       this.pageFilter.typeCyry = "安全工程师";
     }else if(key=="7"){
       this.pageFilter.typeCyry = "质量检测员";
     }else if(key=="8"){
       this.pageFilter.typeCyry = "施工企业三类人员";
     }else if(key=="9"){
       this.pageFilter.typeCyry = "施工管理五大员";
     }else{
       this.pageFilter.typeCyry = "其他";
     }



     this.pageFilter.pageNo = 1;
     this.refreshTable();
   },
   onTableChange(pageFilter) {
      this.pageFilter = { ...this.pageFilter, ...pageFilter };
      this.refreshTable();
      },
   async refreshTable() {
        this.load = true;
        await api.get_ryxx_list(this.pageFilter) .then(res => {
          let pageNo = this.pageFilter.pageNo;
          let pageSize = this.pageFilter.pageSize;
          let records = res.rows;
          let total = res.total;
          this.pageData = {
            ...this.pageData,
            pageNo,
            records,
            pageSize,
            total
          };
          this.load = false;

        })
        .catch(err => {
          this.load = false;
        });

        this.setFootStyle()
      },
   onViewDetails(e,record){
      this.$router.push({
              name:"personDetail",
              query:{
                type:'detail',
                id:record.id,
                breadcrumbName:'从业人员'

             }
            });
   },
   getBreadcrumb() {
        // debugger
        this.breadList = [];
        this.name = this.$route.name;
        let matched = this.$route.matched;
        if (matched.length > 0) {
          for (let i = 0; i < matched.length; i++) {
            if (matched[i].meta.hideTitle === undefined) {
              this.breadList.push(matched[i].meta.title);
            }
          }
        }
        // defaultKey
        if(this.menuData.length>0){
          // children
          for (let i = 0; i < this.menuData.length; i++) {
             if(this.menuData[i].children){
                for (let j = 0; j < this.menuData[i].children.length; j++) {
                  if(this.menuData[i].children[j].key===this.defaultKey){
                    this.breadList.push(this.menuData[i].children[j].name);
                    this.titleName = this.menuData[i].children[j].name;
                  }
                }
             }else{
                if(this.menuData[i].key===this.defaultKey){
                  this.breadList.push(this.menuData[i].name);
                   this.titleName = this.menuData[i].name;
                }
             }

          }
        }
        // console.log(this.breadList);
        // debugger
    },
    async get_ryxx_categary_list() {
          let param = {
            isPass:true
          }
          await api.get_ryxx_categary_list(param).then(res => {
            let data = res.rows;
            let md;
            if(data.length>0){
              for(let i=0;i<data.length;i++){
                md = Object.assign(
                  { key: data[i].idCyry },
                  { name: data[i].typeCyry }
                );
                this.menuData.push(md);
              }
            }
          })
          .catch(err => {
          });

          this.getBreadcrumb();
          if(this.menuData.length>0){
            this.$store.commit('ryMenuData/setMenuData', this.menuData);
            this.pageFilter.idCyry = this.menuData[0].key;
            this.defaultKey=this.menuData[0].key;
            this.refreshTable();
          }

    },
    onQuery() {
     this.keys = ['5']
      console.log(this.keys)
      // if(this.querySelect=='1'){
      //   this.pageFilter.name = this.queryinput;
      //   this.pageFilter.cydw = '';
      //   this.pageFilter.idcard = '';
      //   // this.pageFilter= {
      //   //   pageNo: 1,
      //   //   pageSize: 10,
      //   //   isPass:true,
      //   //   name:this.queryinput
      //   // }
      // }else if(this.querySelect=='2'){
      //   this.pageFilter.name = '';
      //   this.pageFilter.cydw = this.queryinput;
      //   this.pageFilter.idcard = '';
      // }else if(this.querySelect=='3'){
      //   this.pageFilter.name = '';
      //   this.pageFilter.cydw = '';
      //   this.pageFilter.idcard = this.queryinput;
      // }
      // this.pageFilter.pageNo = 1;
      // this.refreshTable();
    },
     getScreenHeight(){
        // 获取浏览器可视区域高度
        this.screenHeight =    document.body.clientHeight ; //`${document.documentElement.clientHeight}`
        window.onresize = function temp() {
          this.screenHeight = document.body.clientHeight;
        };
      },
       setFootStyle(){
        this.$nextTick(()=>{ // 页面渲染完成后的回调
                  this.getScreenHeight();
                  this.clientHeight = this.$refs.pages.offsetHeight+364;
                  // console.log(this.screenHeight,this.clientHeight);
                  if(this.screenHeight>this.clientHeight){
                    if(this.screenHeight-this.clientHeight>30){
                      emv.$emit("setfootmargintop",this.screenHeight-this.clientHeight);
                    }else{
                       emv.$emit("setfootmargintop",30);
                    }
                  }else{
                    emv.$emit("setfootmargintop",30);
                  }

          });
      },
  }
};
</script>
<style lang="less">
.newsPageDiv > img {
  width: 100%;
  max-width: 100%;
  margin-top: -2.5px;
  height: 120px;
}
.nav-title-person-div {
   height: 80px;
   margin-top: -40px;
   position: absolute;
   z-index: 999;
  .nav-title-text-div {
     width: 240px;
     height: 80px;
     line-height: 80px;
     background: #337bd7;
     float: left;
    .nav-title-text-div-span {
       font-size: 24px;
       font-family: Microsoft YaHei;
       font-weight: 400;
       color: #fff;
       margin-left: 20px;
    }
  }

}

.person-nav-div {
  width: 100%;
  background: #fff;
  .ant-layout.ant-layout-has-sider {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    background:#fff;
   }
  .ant-layout-sider {
    position: relative;
    min-width: 0;
    background: #001529;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    background: #fff;
    .ant-layout-sider-children {
      height: 100%;
      margin-top: -3.7px;
      padding-top: 0.1px;
    }
  }
  .ant-menu-dark.ant-menu-inline,
  .ant-menu-dark.ant-menu-vertical,
  .ant-menu-dark.ant-menu-vertical-left,
  .ant-menu-dark.ant-menu-vertical-right {
    border-right: 0;
    width: 240px;
    // height: 268px;
    background: #337bd7;
    padding-left: 20px;
  }

  .ant-menu-dark.ant-menu-inline .ant-menu-item,
  .ant-menu-dark.ant-menu-vertical .ant-menu-item,
  .ant-menu-dark.ant-menu-vertical-left .ant-menu-item,
  .ant-menu-dark.ant-menu-vertical-right .ant-menu-item {
    left: 0;
    margin-left: 0;
    border-right: 0;
    background: #fff;
    color: #333333;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    border-bottom: 0.1px solid #ccc;
    height: 60px;
    line-height: 60px;
  }
  .ant-menu.ant-menu-dark .ant-menu-item-selected,
  .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
    background-color: #fff;
    color: #337bd7;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
  }
  .ant-menu-dark .ant-menu-item,
  .ant-menu-dark .ant-menu-item-group-title,
  .ant-menu-dark .ant-menu-item > a {
    color: #000;
  }
  .ant-menu-dark .ant-menu-item-selected > a,
  .ant-menu-dark .ant-menu-item-selected > a:hover {
    color: #337bd7;
  }
  .ant-menu-vertical .ant-menu-item:not(:last-child),
  .ant-menu-vertical-left .ant-menu-item:not(:last-child),
  .ant-menu-vertical-right .ant-menu-item:not(:last-child),
  .ant-menu-inline .ant-menu-item:not(:last-child) {
    margin-bottom: -4px;
  }
  .ant-menu-vertical > .ant-menu-item,
  .ant-menu-vertical-left > .ant-menu-item,
  .ant-menu-vertical-right > .ant-menu-item,
  .ant-menu-inline > .ant-menu-item,
  .ant-menu-vertical > .ant-menu-submenu > .ant-menu-submenu-title,
  .ant-menu-vertical-left > .ant-menu-submenu > .ant-menu-submenu-title,
  .ant-menu-vertical-right > .ant-menu-submenu > .ant-menu-submenu-title,
  .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
    height: 44px;
    line-height: 44px;
    margin-bottom: 0px;
  }
  .ant-layout.ant-layout-has-sider > .ant-layout,
  .ant-layout.ant-layout-has-sider > .ant-layout-content {
    overflow-x: hidden;
    background: #fff;
    padding-left: 41px;
    .ant-breadcrumb {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-variant: tabular-nums;
      // line-height: 3.3;
      margin-top: 24px;
      margin-bottom: 24px;
      list-style: none;
      -webkit-font-feature-settings: "tnum";
      font-feature-settings: "tnum";
      color: #666666;
      font-family: SimSun;
      font-size: 13px;
    }
  }
}

.news-text{
  font-size: 26px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #337BD7;
}

.unit-table-div{
  margin-left: -10px;
  .ant-table-thead > tr > th {
    padding: 16px 16px;
    overflow-wrap: break-word;
    font-size: 16px;
  }
  .ant-table-tbody > tr > td {
      padding: 16px 16px;
      overflow-wrap: break-word;
      font-size: 14px;
  }

}

.search-div-select{
  // width:340px;
  display:flex;
  margin-bottom: 20px;
  // margin-top: 20px;
  .report-search-btn{
    // width: 80px;
    height: 40px;
    background: #337bd7;
    border: 0;
    border-radius: 4px;
    margin-left: 10px;
    margin-top: 1px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
  }
  .ant-btn-primary:hover, .ant-btn-primary:focus {
    color: #fff;
    background-color: #337BD7;
    border-color: #337BD7;
  }
  .ant-input-group {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    -webkit-font-feature-settings: 'tnum';
    font-feature-settings: 'tnum';
    position: relative;
    display: table;
    // width: 50%;
    width: 320px;
    border-collapse: separate;
    border-spacing: 0;
  }

  .ant-input-group.ant-input-group-compact > *:first-child, .ant-input-group.ant-input-group-compact > .ant-select:first-child > .ant-select-selection, .ant-input-group.ant-input-group-compact > .ant-calendar-picker:first-child .ant-input, .ant-input-group.ant-input-group-compact > .ant-select-auto-complete:first-child .ant-input, .ant-input-group.ant-input-group-compact > .ant-cascader-picker:first-child .ant-input, .ant-input-group.ant-input-group-compact > .ant-mention-wrapper:first-child .ant-mention-editor, .ant-input-group.ant-input-group-compact > .ant-time-picker:first-child .ant-time-picker-input {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    height: 40px;
}

.ant-input-affix-wrapper .ant-input {
    position: relative;
    text-align: inherit;
    height: 40px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
}

.ant-select-selection--single .ant-select-selection__rendered {
    margin-right: 24px;
    line-height: 40px;
}
}

</style>
